.widget {
  position      : relative;
  display       : flex;
  flex-direction: column;
  height        : 360px !important;

  &-title {
    padding: 0 20px;
  }

  &-body {
    flex: 1;
  }
}

.empty {
  background: #f0f2f5;
  text-align: center;
  height    : 100%;
  width     : 100%;

  &-inner {
    display  : block;
    position : relative;
    top      : 50%;
    font-size: 16px;
    transform: translateY(-8px);
  }
}

.loading {
  height  : 100%;
  width   : 100%;
  position: relative;

  &.active {
    .loading-mask {
      display        : flex;
      justify-content: center;
      align-items    : center;
      position       : absolute;
      top            : 0;
      left           : 0;
      right          : 0;
      bottom         : 0;
      background     : rgba(0, 0, 0, 0.1);

      &::after {
        content: 'loading...';
      }
    }
  }


}

.row {
  position     : relative;
  box-sizing   : border-box;
  display      : flex;
  margin-bottom: 12px;
}

// 循环生成栅格布局
.init-col(@n, @i: 1) when (@i =< @n) {
  .col-@{i} {
    box-sizing: border-box;
    height    : 100%;
    width     : (1 / 24 * @i * 100) * 1%;
  }

  .init-col(@n, (@i + 1));
}

.init-col(24);

.demo4-tips {
  position: absolute;
  top     : 0;
  right   : 66px;
  color   : #888;
}
